<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container{
        position: relative;
        width: 854px;
        height: 480px;
        margin: 100px auto;
    }
    .ctrl{
        position: absolute;
        left: 50%;
        top:50%;
        margin-left: -32px;
        margin-top: -32px;
    }
    .ctrl img{
        width: 64px;
        height: 64px;
    }
    .ad{
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top:50%;
        margin-top: -150px;
        margin-left: -150px;
    }
    .fade{
        display: none;
    }
    .show{
        display: block;
    }
</style>
<body>
    <div class="container" id="video_con">
        <video src="data/birds.mp4" loop id="video_cz">
            您的浏览器版本太低请更新！
        </video>
        <img class="ad fade show" src="data/erweima.png" id="poster" alt="">
        <a class="ctrl fade show" href="#" id="control">
            <img src="data/play.png" alt="">
        </a>
        <a class="ctrl fade" href="#" id="control2">
            <img src="data/pause.png" alt="">
        </a>
    </div>

</body>
<script src="data/jquery-1.11.3.js"></script>
<script>
    $("#video_con").hover(function () {
        if(!$("#control").is(".show")){
            $("#control2").addClass("show");
            setTimeout(function () {
                $("#control2").removeClass("show");
            },5000)
        }
    },function () {
        $("#control2").removeClass("show");
    })
    $("#control").click(function () {
       video_cz.play();
        $("#control").removeClass("show");
        $("#poster").removeClass("show");
        $("#control2").addClass("show");
        setTimeout(function () {
            $("#control2").removeClass("show");
        },5000)
    })
    $("#control2").click(function () {
        video_cz.pause();
        $("#poster").addClass("show");
        $("#control").addClass("show");
        $("#control2").removeClass("show");
    })
   $("#video_con").click(function () {
        if(!($("#control2").is(".show")))
        {
            !video_cz.paused?video_cz.pause():()=>{};
            $("#control").addClass("show");
            $("#poster").addClass("show");
        }
    })
</script>
</html>